<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Fill Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
            numImages++;
        }
        for(var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
                if(++loadedImages >= numImages) {
                    callback(images);
                }
            };
            images[src].src = sources[src];
        }
    }
    function draw(images) {
        var width = window.innerWidth;
        var height = window.innerHeight;

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });
        var layer = new Konva.Layer();

        var colorPentagon = new Konva.RegularPolygon({
            x: 80,
            y: stage.getHeight() / 2,
            sides: 5,
            radius: 70,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        var patternPentagon = new Konva.RegularPolygon({
            x: 220,
            y: stage.getHeight() / 2,
            sides: 5,
            radius: 70,
            fillPatternImage: images.darthVader,
            fillPatternOffset: { x : -220, y : 70},
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        var linearGradPentagon = new Konva.RegularPolygon({
            x: 360,
            y: stage.getHeight() / 2,
            sides: 5,
            radius: 70,
            fillLinearGradientStartPoint: { x : -50, y : -50},
            fillLinearGradientEndPoint: { x : 50, y : 50},
            fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        var radialGradPentagon = new Konva.RegularPolygon({
            x: 500,
            y: stage.getHeight() / 2,
            sides: 5,
            radius: 70,
            fillRadialGradientStartPoint: 0,
            fillRadialGradientStartRadius: 0,
            fillRadialGradientEndPoint: 0,
            fillRadialGradientEndRadius: 70,
            fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        /*
               * bind listeners
               */
        colorPentagon.on('mouseover touchstart', function() {
            this.setFill('blue');
            layer.draw();
        });

        colorPentagon.on('mouseout touchend', function() {
            this.setFill('red');
            layer.draw();
        });

        patternPentagon.on('mouseover touchstart', function() {
            this.setFillPatternImage(images.yoda);
            this.setFillPatternOffset({ x : -100, y : 70});
            layer.draw();
        });

        patternPentagon.on('mouseout touchend', function() {
            this.setFillPatternImage(images.darthVader);
            this.setFillPatternOffset({x : -220, y :70});
            layer.draw();
        });

        linearGradPentagon.on('mouseover touchstart', function() {
            this.setFillLinearGradientStartPoint({ x: -50});
            this.setFillLinearGradientEndPoint({ x : 50});
            this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
            layer.draw();
        });

        linearGradPentagon.on('mouseout touchend', function() {
            // set multiple properties at once with setAttrs
            this.setAttrs({
                fillLinearGradientStartPoint: {x : -50, y : -50},
                fillLinearGradientEndPoint: { x : 50, y : 50},
                fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
            });
            layer.draw();
        });

        radialGradPentagon.on('mouseover touchstart', function() {
            this.setFillRadialGradientColorStops([0, 'red', 0.5, 'yellow', 1, 'green']);
            layer.draw();
        });

        radialGradPentagon.on('mouseout touchend', function() {
            // set multiple properties at once with setAttrs
            this.setAttrs({
                fillRadialGradientStartPoint: 0,
                fillRadialGradientStartRadius: 0,
                fillRadialGradientEndPoint: 0,
                fillRadialGradientEndRadius: 70,
                fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue']
            });
            layer.draw();
        });

        layer.add(colorPentagon);
        layer.add(patternPentagon);
        layer.add(linearGradPentagon);
        layer.add(radialGradPentagon);
        stage.add(layer);
    }
    var sources = {
        darthVader: '/assets/darth-vader.jpg',
        yoda: '/assets/yoda.jpg'
    };

    loadImages(sources, function(images) {
        draw(images);
    });
  </script>

</body>
</html>